<template>
  <div class="login">
    <Header>
      <template v-slot:icon-l><i class="iconfont icon-fanhui" @click='goBack'></i></template>
      <div class="login-title">确认</div>
      <template v-slot:icon-r><img src="@/assets/images/home.png" alt="" class="icons"></template>
    </Header>
    <section>
      <div>
        <input type="password" v-model="userPwd" placeholder="请输入密码" pattern="[0-9]*">
      </div>
      <div>
        <input type="password" v-model="userPwd2" placeholder="再次输入密码" pattern="[0-9]*">
      </div>
      <div class="login-btn" @click="next">确认</div>
    </section>
  </div>
</template>

<script>
import Header from '@/components/common/Header.vue'
import { Toast } from 'vant';
export default {
  components: {
    Header
  },
  data() {
    return {
      userPwd: '',
      userPwd2: '',
      userTel:'',
      rules: {
        //密码验证规则
        userPwd: {
          rule: /^\w{6,12}$/,
          msg: '密码不能为空,并且要求6-12位'
        },
        userPwd2:{
          rule: '',
          msg: '密码输入不一致'
        }
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    goBack() {
      this.$router.back()
    },
    //校验
    validate(key) {
      let bool = true
      if (!this.rules[key].rule.test(this[key])) {
        //提示信息
        Toast(this.rules[key].msg)
        bool = false
        return false
      }
      return bool
    },
    //确认修改密码
    next() {
      if(!this.validate('userPwd')) return
      this.rules.userPwd2.rule = new RegExp(`^${this.userPwd}$`)
      if(!this.validate('userPwd2')) return
      //修改密码
      this.$axios({
        url: '/api/recovery',
        method: 'post',
        data: {
          phone: this.$route.query.tel,
          pwd:this.userPwd
        }
      }).then(res => {
        Toast(res.data.msg)
        this.$router.push({name:'userLogin'})
      })
    }
  },
  created() {
   },
  mounted() { },
  beforeCreate() { },
  beforeMount() { },
  beforeUpdate() { },
  updated() { },
  beforeDestroy() { },
  destroyed() { },
  activated() { }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.login {
  .header {
    color: #fff;

    .login-title {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 20%);
      color: #fff;
    }

    .icons {
      width: .8rem;
      height: .8rem;
    }

    ::v-deep .icon-l {
      width: auto;
    }
  }

  section {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 3.2rem);
    align-items: flex-start;
    padding: .5333rem;

    div {
      width: 100%;
      height: 1.1733rem;
      margin-top: .5rem;
      border-radius: 3px;
      box-shadow: 0 0 0 1px #d7d7d7;

      input {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 0 .2667rem;
        background-color: #fff;
      }
    }

    .login-btn {
      border: none;
      margin-top: .5rems;
      background-color: #b0352f;
      width: 100%;
      height: 1.2rem;
      border-radius: .08rem;
      color: #fff;
      text-align: center;
      line-height: 1.2rem;
    }
  }
}
</style>
